import React, { Component } from 'react'
import { httpGet } from '../../services/http'
import Header from '../../components/Header/Header'
import Footer from '../../components/Footer/Footer'
import { Table, Container, Row, Col } from 'react-bootstrap'
import OrderItem from './OrderItem/OrderItem'
import intl from 'react-intl-universal'
import './Order.less'

class Order extends Component {
  state = { orderList: [] }

  async componentDidMount () {
    await this.getOrder()
  }

  getOrder = async () => {
    const [res, err] = await httpGet({ url: '/order/getOrder' })
    if (res) {
      this.setState({ orderList: res.data })
    } else {
      console.log('order err', err)
    }
  }

  render () {
    const { orderList } = this.state
    return (
      <div id = {'order'}>
        <Header />
        <Container className = {'main'}>
          <Row>
            <Col>
              <Table bordered size = {'sm'} className = {'text-center'}>
                <tbody>
                <tr>
                  <th className = {'col-6'}>{intl.get('orderList.goods')}</th>
                  <th className = {'col-2'}>{intl.get('orderList.price')}</th>
                  <th className = {'col-2'}>{intl.get('orderList.count')}</th>
                  <th className = {'col-2'}>{intl.get('orderList.payment')}</th>
                </tr>
                </tbody>
              </Table>
            </Col>
          </Row>
          {
            orderList.length ?
              orderList.map(item => {
                return <OrderItem
                  key = {item._id} item = {item}
                  onGetOrder = {this.getOrder}
                  history = {this.props.history} />
              }) : <h3 className = {'text-center font-weight-normal'}>{intl.get(
              'nodata')}</h3>
          }
        </Container>
        <Footer />
      </div>
    )
  }
}

export default Order
